<!--
 * @Author: fishroom
 * @Date: 2022-03-28 23:53:27
 * @LastEditTime: 2022-04-02 16:03:04
 * @FilePath: \website\src\components\common\loading\Loading.vue
-->
<template>
  <div class="loading_mod" v-show="loadingFlag">
    <div class="wrapper-no7">
      <div class=""></div>
      <div class="animation-wrapper">
        <div class="cat-wrapper">
          <svg
            class="cat"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 207.68 163.77"
            preserveAspectRatio="none"
          >
            <title>cat</title>
            <g class="body">
              <circle class="body-backcircle" cx="76.86" cy="83.31" r="45.5" />
              <circle class="body-frontcircle" cx="150.86" cy="83.31" r="45.5" />
              <rect class="body-between" x="74.65" y="37.89" width="83.04" height="90.61" />
            </g>
            <circle class="head" cx="161.76" cy="52.75" r="45.92" />
            <g class="eyes">
              <circle class="eyes-l" cx="153.51" cy="46.5" r="8.25" />
              <circle class="eyes-r" cx="185.76" cy="46.5" r="8.25" />
            </g>
            <g class="ears">
              <polygon class="ears-l" points="132.76 19 132.76 0 149.55 8.81 132.76 19" />
              <polygon class="ears-r" points="179.44 11.2 197 4.06 195.16 22.9 179.44 11.2" />
            </g>
            <rect
              class="tail"
              x="-11"
              y="32.87"
              width="107"
              height="20"
              rx="9.58"
              ry="9.58"
              transform="translate(41.19 -18.41) rotate(45)"
            />
            <g class="backlegs">
              <path
                class="backlegs1"
                d="M74,124.85a6,6,0,0,0-4.7-7.07l-4.41-.89a6,6,0,0,0-7.07,4.7l-6.31,31.35a8.25,8.25,0,1,0,15.64,5,5.94,5.94,0,0,0,.44-1.33Z"
                transform="translate(-1.58 -0.92)"
              />
              <path
                class="backlegs2"
                d="M88.22,125.86a6,6,0,0,0-4.38-7.27l-4.37-1.08a6,6,0,0,0-7.27,4.38l-7.69,31a8.25,8.25,0,1,0,15.41,5.72,5.94,5.94,0,0,0,.5-1.31Z"
                transform="translate(-1.58 -0.92)"
              />
            </g>
            <g class="frontlegs">
              <path
                class="frontlegs1"
                d="M162.89,120.91a6,6,0,0,0-7.65-3.68L151,118.72a6,6,0,0,0-3.68,7.65l10.57,30.18a8.25,8.25,0,1,0,16-3.65,5.94,5.94,0,0,0-.3-1.37Z"
                transform="translate(-1.58 -0.92)"
              />
              <path
                class="frontlegs2"
                d="M175.77,120.08a6,6,0,0,0-7.48-4l-4.31,1.3a6,6,0,0,0-4,7.48l9.22,30.62a8.25,8.25,0,1,0,16.17-2.94,5.94,5.94,0,0,0-.24-1.38Z"
                transform="translate(-1.58 -0.92)"
              />
            </g>
          </svg>
        </div>
        <div class="loading"></div>
      </div>
      <div class="layout notvisible">
        <div class="layout__nav">
          <ul class="layout__nav-left">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul class="layout__nav-right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="layout__title"></div>
        <div class="layout__content">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <button class="restart">restart animation</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useStore } from "vuex";
var timer: any;
export default defineComponent({
  name: "Loading",
  setup() {
    const loadingFlag = ref(true);
    const store = useStore();
    onMounted((): void => {
      timer = window.setTimeout((): any => {
        loadingFlag.value = false;
        store.commit("changeLoading", true);
        clearTimeout(timer);
      }, 1500);
    });
    return {
      loadingFlag,
    };
  },
});
</script>

<style>
.loading_mod {
  position: absolute;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100vh;
  font-family: "Delius Swash Caps", cursive;
  text-align: center;
  color: #004466;
  background: #e4e5e6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wrapper-no7 {
  display: flex;
  justify-content: center;
}
.wrapper-no7 .animation-wrapper {
  width: 500px;
  display: flex;
  justify-content: space-between;
}
.wrapper-no7 .animation-wrapper.notvisible {
  display: none;
}
.wrapper-no7 .cat {
  width: 80%;
  overflow: visible;
}
.wrapper-no7 .cat-wrapper {
  width: 300px;
}
.wrapper-no7 .eyes circle {
  fill: #fff;
}
.wrapper-no7 .frontlegs,
.wrapper-no7 .backlegs {
  opacity: 1;
}
.wrapper-no7 .logoani {
  align-self: flex-end;
  margin-left: -25px;
  font-size: 45px;
}
.wrapper-no7 .logo {
  font-size: 55px;
  opacity: 0;
  position: absolute;
  top: -40px;
}
.wrapper-no7 .logo.visible {
  opacity: 1;
  top: 40px;
  transition: all 1s;
}
.wrapper-no7 .restart {
  display: none;
  font-size: 20px;
  position: absolute;
  top: 50%;
  background-color: white;
  border: #bbbbbb 1px solid;
  box-shadow: none;
  padding: 20px;
  border-radius: 10px;
}
.wrapper-no7 .restart:hover {
  background-color: #ddd;
}
.wrapper-no7 .restart.visible {
  display: block;
}
.wrapper-no7 .layout {
  display: block;
  opacity: 1;
  width: 80%;
  position: absolute;
  top: 40px;
  transition: opacity 1s;
}
.wrapper-no7 .layout.notvisible {
  display: none;
  opacity: 0;
}
.wrapper-no7 .layout li {
  height: 15px;
  background-color: #bbbbbb;
}
.wrapper-no7 .layout ul {
  display: flex;
  margin: 0;
  padding: 0;
}
.wrapper-no7 .layout li {
  width: 50px;
  margin-left: 20px;
  list-style: none;
  background-color: #bbbbbb;
}
.wrapper-no7 .layout .layout__nav {
  display: flex;
  justify-content: space-between;
}
.wrapper-no7 .layout .layout__nav-left,
.wrapper-no7 .layout .layout__nav-right {
  width: 40%;
}
.wrapper-no7 .layout .layout__nav-left li:first-child {
  margin-left: 0;
}
.wrapper-no7 .layout .layout__nav-right {
  flex-direction: row-reverse;
}
.wrapper-no7 .layout .layout__title {
  width: 80%;
  height: 40px;
  background-color: #bbbbbb;
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper-no7 .layout .layout__content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.wrapper-no7 .layout .layout__content div {
  width: 80%;
  height: 20px;
  background-color: #bbbbbb;
  margin-top: 20px;
}
.wrapper-no7 .layout .layout__content div:first-child {
  margin-top: 100px;
}
.loading {
  font-style: 10px;
  width: 0.01em;
  height: 0.01em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  align-self: flex-end;
  top: -100px;
  animation: load-effect 1s infinite linear;
}
@media screen and (max-width: 500px) {
  .wrapper-no7 .layout {
    width: 100%;
  }
  .wrapper-no7 .layout .layout__nav,
  .wrapper-no7 .layout .layout__nav-left,
  .wrapper-no7 .layout .layout__nav-right {
    display: none;
  }
  .wrapper-no7 .layout .layout__title {
    margin-top: 100px;
  }
  .wrapper-no7 .layout .layout__content div:first-child {
    margin-top: 40px;
  }
  .wrapper-no7 .cat-wrapper {
    width: 100px;
  }
  .wrapper-no7 .animation-wrapper {
    width: 200px;
  }
  .loading {
    top: -50px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper-no7 .layout {
    width: 100%;
  }
  .wrapper-no7 .layout .layout__title {
    margin-top: 100px;
  }
  .wrapper-no7 .layout .layout__content div:first-child {
    margin-top: 40px;
  }
  .wrapper-no7 .layout .layout__title {
    margin-top: 70px;
  }
  .wrapper-no7 .layout .layout__nav {
    margin-top: 20px;
  }
  .wrapper-no7 .layout .layout__nav-left,
  .wrapper-no7 .layout .layout__nav-right {
    width: 35%;
  }
  .wrapper-no7 .logo {
    font-size: 45px;
  }
}

@keyframes load-effect {
  0% {
    box-shadow: -3em 2em 0 0.5em #fff, 3em 2em 0 0 #fff, 3em 2em 0 -0.5em #fff;
  }
  25% {
    box-shadow: -3em 2em 0 0 #fff, 0 2em 0 -0.5em #fff, 3em 2em 0 0 #fff;
  }
  50% {
    box-shadow: -3em 2em 0 -0.5em #fff, 0 2em 0 0 #fff, 3em 2em 0 0.5em #fff;
  }
  75% {
    box-shadow: -3em 2em 0 0 #fff, 0 2em 0 0.5em #fff, 3em 2em 0 0 #fff;
  }
  100% {
    box-shadow: -3em 2em 0 0.5em #fff, 0 2em 0 0 #fff, 3em 2em 0 -0.5em #fff;
  }
}
</style>
